<template>
	<view class="container">
		<block v-if="type">
			<view class="header">
				<!-- 导航区 -->
				<scroll-view scroll-x class="navScroll" enable-flex
				>
					<view class="navItem" v-for="item in SongSheetTag" :key="item.id">
						<view :class="navId == item.id ? 'navContent active': 'navContent'"
						@tap="btnNavTag(item.id,item.name)">
						{{item.name}}
						</view>
					</view>
					
				</scroll-view>
				<!-- 更多数据标签 -->
				<text class="iconfont icon-gengduo2" @tap="toAllTag"></text>
			</view>
			<!-- 歌单区域 -->
			<songSheetList :tagSongSheetData="tagSongSheetData" :navName="navName" :isMore="isMore"></songSheetList>
			
		</block>
		<view v-else class="AllTag">
			<block v-if="AllTag">
				<view class="returnButton" @tap="goBackSquare">
				    <text class="iconfont icon-fanhui"></text>
				    <text class="info">返回到歌单广场</text>
				</view>
				<!-- 列表区域 -->
				<scroll-view class="tagContainer" scroll-y>
					<view class="category" v-for="(item,index) in allTags" :key="index">
					    <view class="categoryTitle">{{item[0].key}}</view>
					    <view class="categoryList">
					        <view class="categoryItem" v-for="(i,idx) in item[1]" :key="idx"
							@tap="toSongSheetList(i.name)">
								<text class="iconfont icon-remen" v-if="i.hot"></text>
								<text class="tagName">{{i.name}}</text>
					        </view>
					    </view>
					</view>
				</scroll-view>
			</block>
			<view class="oneSongSheetList" v-else>
				<view class="returnBtn" @tap="goBackAllTag">
				    <text class="iconfont icon-fanhui">返回上一层</text>
				    <text class="info">{{tagName}}</text>
				</view>
				<scroll-view class="songSheetScroll" scroll-y enable-flex
				@scrolltolower="handleTolower" >
					<view class="listItem" v-for="item in tagSongSheetData" :key="item.id"
					@tap="toSongSheetDetail(item.id)">
						
						<image class="cover" :src="item.coverImgUrl?item.coverImgUrl:item.picUrl"></image>
						<view class="playConut">
							<text class="iconfont icon-bofang1"></text>
							<text>{{item.playCount>100000000?parseInt(item.playCount/100000000)+'亿':parseInt(item.playCount/10000)+'万'}}</text>
						</view>
						<text class="title">{{item.name}}</text>
					</view>
				</scroll-view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import songSheetList from '../../components/songSheetList/songSheetList'
	
	export default {
		data() {
			return {
				SongSheetTag: [], // 歌单标签数据
				navId:'', // 导航的id 用于标识
				navName:'', //用于一进来就加载第一个标签的数据
				tagSongSheetData:[], // 存储对应标签下的歌单数据
				allTags:[], // 全部标签数据
				type:true,// 用于切换更多标签页
				AllTag:true, // 用于更多标签里点击跳转
				tagName:'', // 更多标签里单独点击的标签名
				isMore:true
			}
		},
		components:{songSheetList},
		onLoad() {
			this.getHotSongSheetList() // 获取歌单标签
			this.getTagSongSheetData(this.navName) // 获取对应标签歌单数据
			this.getAllTags() // 获取全部标签
		},
		methods: {
			// 获取热门歌单标签数据
			async getHotSongSheetList(){
				let res = await this.$myRequest('/playlist/hot')
				this.SongSheetTag = res.tags
				this.navId = res.tags[0].id // 默认选择第一个
				this.navName =  res.tags[0].name// 加载第一个标签的歌单数据
				// console.log(res);
			},
			// 点击标签切换数据
			btnNavTag(navId,navName){
				this.tagSongSheetData = [] // 切换之前先清空数据
				this.navId = navId
				this.navName = navName
				console.log(navName);
				// 获取对应标签名下的歌单数据
				this.getTagSongSheetData(navName)
			},
			// 获取对应标签名下的歌单数据
			async getTagSongSheetData(navName,offset){
				/**
				 * 可选参数 : order: 可选值为 'new' 和 'hot', 分别对应最新和最热 , 默认为 'hot'
				 * cat: tag, 比如 " 华语 "、" 古风 " 、" 欧美 "、" 流行 ", 默认为 "全部",可从歌单分类接口获取(/playlist/catlist)
				 * limit: 取出歌单数量 , 默认为 50
				 * offset: 偏移数量 , 用于分页 , 如 :( 评论页数 -1)*50, 其中 50 为 limit 的值*/
				// /top/playlist/highquality 获取精品歌单
				if(offset == undefined){ offset = '' }
				let res = await this.$myRequest('/top/playlist',{
					cat:navName,limit:21,offset
				})
				// console.log(res);
				this.tagSongSheetData = res.playlists
				// this.tagSongSheetData.push(...res.playlists)
				
			},
			// 获取更多标签数据
			async getAllTags(){
				let res = await this.$myRequest('/playlist/catlist')
				console.log(res,'allta');
				// 以下借鉴别人的做法, 把分散的数据 对应各自的键值对
				let allTags = [];
				for (var key in res.categories) {
					console.log(key); // key的值是res.categories的长度
					allTags.push([{ key: res.categories[key] }, []])
				}    
				let index = 0
				allTags.forEach(item => {
				  res.sub.forEach(i => {
				    if (i.category == index) {
				      allTags[index][1].push(i)
				    }
				  })
				  index++;
				})
				console.log(allTags);
				this.allTags = allTags
			},
			// 点击跳转到歌单详情页
			toSongSheetDetail(songSheetId){
				uni.navigateTo({
					url:'/pages/songSheetDetail/songSheetDetail?songSheetId=' + songSheetId
				})
			},
			// 点击切换到更多标签页
			toAllTag(){
				this.type = false
			},
			// 返回歌单广场
			goBackSquare() {
				this.type = true
				this.getTagSongSheetData(this.navName)
			}, 
			// 点击跳转到指定标签页
			toSongSheetList(navName){
				this.tagSongSheetData = [] // 切换之前先清空数据
				this.tagName =  navName
				this.AllTag = false
				this.getTagSongSheetData(navName)
			},
			// 返回更多标签页
			goBackAllTag() {
				this.AllTag = true
				this.tagSongSheetData = [] // 切换之前先清空数据
				this.getTagSongSheetData(this.navName)
			},
			  
			  
			// 视频scroll-view 自定义上拉加载
			async handleTolower(){
				console.log(this.tagSongSheetData.length);
				// this.getTagSongSheetData(this.navName,this.tagSongSheetData.length) // H5报错
				let res = await this.$myRequest('/top/playlist',{
					cat:this.navName,limit:21,offset:this.tagSongSheetData.length
				})
				this.tagSongSheetData.push(...res.playlists)
			},
			
			// 下拉刷新
			handleToupper() {
				console.log(刷新了);
			}
		}
	}
</script>

<style lang="scss">
	.container {
		.header {
			display: flex;
			padding: 0 30rpx;
			.navScroll {
				/* #ifdef MP-WEIXIN */
				display: flex;
				/* #endif */
				flex: 1;
				height: 60rpx;
				white-space: nowrap;
				overflow: hidden;
				padding: 20rpx 0;
				.navItem {
					/* #ifdef H5 */
					display: inline-block;// H5支持
					/* #endif */
					padding-right: 40rpx;
					font-size: 28rpx;
					height: 60rpx;
					line-height: 60rpx;
					box-sizing: border-box;
					color: #aaa;
					.active {
						color: black;
						font-weight: 600;
					}
					.navContent {
						height: 60rpx;
						box-sizing: border-box;
						/* #ifdef H5 */
						display: inline-block;// H5支持
						/* #endif */
					}
				}
			}
			// 更多图标
			.iconfont {
				width: 50rpx;
				height: 50rpx;
				line-height: 50rpx;
				padding: 20rpx 0 20rpx 10rpx;
				text-align: center;
				font-size: 50rpx;
				color: #aaa;
				background-color: #fff;
			}	
		}
		
		
		// 更多标签页的样式
		.AllTag {
			background-color: #fff;
			height: 100%;
			width: 100%;   
			.returnButton {
			    margin:0 30rpx;
			    display: flex;
			    align-items: center;
				padding: 20rpx 0;
				.icon-fanhui {
				    font-size: 30rpx;
				    width: 30rpx;
				    height: 30rpx;
				    line-height: 30rpx;
				}
				.info {
				    margin-left: 20rpx;
				    font-size: 30rpx;
				    color: rgb(78, 78, 78);
				}
			}
			.tagContainer {
				/* #ifdef MP-WEIXIN */
				height: calc(100vh - 80rpx); //140rpx 头部和导航的高度总和
				/* #endif */
				/* #ifdef H5 */
				height: calc(100vh - 160rpx);
				/* #endif */
				.category {
				    margin: 30rpx 0 70rpx;
					.categoryTitle {
					    font-size: 30rpx;
					    margin-left: 35rpx;
					}
					
					.categoryList {
					    display: flex;
					    flex-wrap: wrap;
						.categoryItem {
						    /* border: 1px solid red; */
						    display: flex;
							align-items:center;
							position: relative;
							background-color: #f3f3f3;
						    width: 20%;
						    margin:30rpx 0 0 4vw;
						    padding: 15rpx 0 ;
						    font-size: 20rpx;
						    border-radius: 62rpx;
							.tagName {
								margin: 0 auto;
							}
							.iconfont {
								position: absolute;
								top: 15rpx;
								left: 10rpx;
								color: red;
								font-size: 26rpx;
							}
						}
					}
				}
			}
			// 更多标签的里的样式
			.oneSongSheetList {
				// 歌单区域 已经封装成自定义组件使用
				.returnBtn {
					margin-left: 20rpx;
					display: flex;
					align-items: center;
					padding: 20rpx 0;
					.icon-fanhui {
						flex: 1;
					    font-size: 20rpx;
					    width: 30rpx;
						color: #aaa;
					    height: 30rpx;
					    line-height: 30rpx;
					}
					.info {
						flex: 1;
						text-align: left;
					    font-size: 30rpx;
						font-weight: bolder;
					    color: rgb(78, 78, 78);
					}
				}
				.songSheetScroll {
					/* #ifdef MP-WEIXIN */
					height: calc(100vh - 100rpx); //140rpx 头部和导航的高度总和
					/* #endif */
					/* #ifdef H5 */
					height: calc(100vh - 180rpx);
					/* #endif */
					width: 100%;
					display: flex;
					flex-wrap: wrap;
					padding: 0 30rpx;
					box-sizing: border-box;
					// text-align: center;
					text-align: left;
				  .listItem {
						/* #ifdef H5 */
						display: inline-block;// H5支持
						/* #endif */
						position: relative;
						width: 31%;
						height: 340rpx;
						line-height: 36rpx;
					.cover {
						  width: 100%;
						  height: calc(33vw - 20rpx);
						  border-radius: 20rpx;
					}
					.playConut {
						position: absolute;
						right: 0;
						top: 0;
						color: #fff;
						font-size: 26rpx;
						margin: 10rpx;
						padding: 0 15rpx;
						background: rgba(161,162,162,0.5);
						border-radius: 10rpx;
						// filter: blur(20px);
						.iconfont {
							font-size: 22rpx;
						}
					}
					.title {
						  font-size: 26rpx;
						  margin-top: 10rpx;
						  color: rgb(56, 56, 56);
						  word-break: break-all;
						  text-overflow: ellipsis;
						  display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
						  -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
						  -webkit-line-clamp: 2; /** 显示的行数 **/
						  overflow: hidden;  /** 隐藏超出的内容 **/
						  text-align: left;
					}
				  }
				  .listItem:nth-child(3n+2){
				    margin:0 3.5%;
				  }
				}
				
			}
		}
	}
</style>
